<template>
    <div>
        <NavBar :title="$t('language')" />
        <div class="container">
            <ul class="list">
                <li class="list_item l-f l-row-sb" @click="onChangeLang(item.value)" v-for="(item,index) in langList" :key="index">
                    <p class="list_item_label">{{item.name}}</p>
                    <a-radio :checked="currentLang === item.value"></a-radio>
                </li>
            </ul>
            <a-button class="submit" type="primary" @click="onSubmit">{{$t('determine')}}</a-button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/store'
import NavBar from '@/components/navBar/index.vue'

const mainStore = useMainStore()

const router = useRouter()
const { locale } = useI18n()

const currentLang = ref('en')

currentLang.value = mainStore.lang

 const langList = reactive([
        {
            name: 'English',
            value: 'en'
        },
        {
            name: '简体中文',
            value: 'cn'
        },
        {
            name: 'ภาษาไทย',
            value: 'th'
        },
        {
            name: '日本语',
            value: 'jp'
        },
        {
            name: 'Tiếng Việt',
            value: 'vi'
        }
    ])

    const onChangeLang = (value) => {
        currentLang.value = value
    }

    const onSubmit = () => {
        mainStore.setLang(currentLang.value)
        locale.value = currentLang.value
        router.back()
    }

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>